import {Button, type GetProps, Image, Input, message, Modal, Skeleton} from "antd";
import {useState} from "react";
import {useNavigate} from "react-router-dom";
import {verifyPasswordUsingPost} from "../../api/roomController.ts";

interface MainCardProps {
  roomInfo: {
    roomName: string;
    roomProfile: string;
    createtime: string;
    updatetime: string;
    isPassword: boolean;
    maxPeople: number;
    room_cover: string;
    roomid: string;
    userid:string;
    roomPassword:string
  };
}

export default function MainCard({ roomInfo }: MainCardProps) {
  const [skeletonFlag, setSkeletonFlag] = useState(true);
  const [maskLayer, setmaskLayer] = useState(false);
  const [password, setpassword] = useState("");

  type OTPProps = GetProps<typeof Input.OTP>;

  const onChange: OTPProps["onChange"] = (text) => {
    setpassword(text);
  };

  const onInput: OTPProps["onInput"] = (value) => {};

  const sharedProps: OTPProps = {
    onChange,
    onInput,
  };

  const Navigate = useNavigate();

  setTimeout(() => {
    setSkeletonFlag(false);
  }, 300);

  return (
    <>

      {skeletonFlag ? (
        <div className="relative " style={{ width: "100%" }}>
          {/* 图片容器 */}
          <div className="relative pb-[56.25%] max-h-[165px]">
            <Skeleton.Image
              active={true}
              className={"absolute top-0 left-0 w-full h-full object-cover"}
              style={{
                width: "100%",
                height: "100%",
              }}
            />
          </div>

          {/* 标题 */}
          <div className="mt-4">
            <Skeleton.Node
              active={true}
              style={{ width: "100%", maxHeight: 25 }}
            />
          </div>
          {/* 描述 */}
          <div className="mt-2">
            <Skeleton.Node
              active={true}
              style={{ width: "100%", maxHeight: 30 }}
            />
          </div>

          {/* 创建时间 */}
          <div className="mt-2 text-gray-500 text-sm">
            <Skeleton.Node
              active={true}
              style={{ width: "100%", maxHeight: 20 }}
            />
          </div>

          {/* 创建人 + 按钮 */}
          {/* 创建人 + 按钮 */}
          <div
            className="mt-6 flex justify-between items-center"
            style={{ width: "100%" }}
          >
            {/* 左侧创建人信息 */}
            <div style={{ width: "100%" }}>
              <Skeleton.Node
                active={true}
                style={{ width: "50%", maxHeight: 30 }}
              />
            </div>
            {/* 右侧按钮 */}
            <div>
              <Skeleton.Button
                active={true}
                style={{ width: "25%", maxHeight: 30 }}
              />
            </div>
          </div>
        </div>
      ) : (
        <div className="grid-cols-2 animate__animated animate__bounceIn">
          <div>
            <Image
              className="aspect-video"
              style={{ maxWidth: 800, width: "100%" }}
              fallback=""
              src={roomInfo.room_cover}
            />
          </div>
          <div>
            <h2 className="text-xl mt-2 font-semibold">{roomInfo.roomName}</h2>
            <h4 className="text-sm mt-1 overflow-hidden overflow-ellipsis line-clamp-2 text-gray-700">
              {roomInfo.roomProfile}
            </h4>

            <p className="text-xs text-gray-700 mt-1">创建时间：{roomInfo.createtime}</p>
            <div className="flex justify-between items-center sm:mt-4 mt-2">
              <p className="text-sm mt-1 truncate">房主：星轨管理员</p>
              <Button
                color="primary"
                variant="outlined"
                className="text-xs px-2 py-1 sm:text-base sm:px-4 sm:py-1"
                style={{ borderRadius: 3 }}
                onClick={() => {
                  if(roomInfo.isPassword){
                    setmaskLayer(true)
                }else{
                    Navigate(`/roomInfo/${roomInfo.roomid}`);
                  }
                }
                }
              >
                加入
              </Button>
            </div>
          </div>
        </div>
      )}
      <Modal
          title="房间密码"
          open={maskLayer}
          centered
          onOk={async () => {
              const res = await verifyPasswordUsingPost({
                password: password,
                roomId: roomInfo.roomid
              })
              if (res.code == 200) {
                message.success("密码正确，欢迎进入");
                setmaskLayer(false);
                setpassword("");
                Navigate(`/roomInfo/${roomInfo.roomid}`);
              } else {
                message.error(res.message);
              }
          }}
          onCancel={() => {
            setmaskLayer(false);
            setpassword("");
          }}
      >
        <div className={"flex justify-center mt-10 mb-10"}>
          <Input.OTP mask="🔒" value={password} {...sharedProps} />
        </div>
      </Modal>
    </>
  );
}
